<template>
  <div v-loading="containerLoading" class="app-container">
    <div class="filter-container">
      <el-select
        v-model="activityStatus"
        placeholder="状态"
        size="medium"
        class="filter-item"
        @change="getlist">
        <el-option
          v-for="item in stateOptions"
          v-if="!item.role || item.role === $store.getters.userInfo.role_id"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-select
        v-model="activityType"
        placeholder="活动版块"
        clearable
        size="medium"
        class="filter-item"
        @change="getlist">
        <el-option
          v-for="item in config.activityClassOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-select
        v-model="activityYear"
        placeholder="学年"
        clearable
        size="medium"
        style="width: 130px"
        class="filter-item"
        @change="getlist">
        <el-option
          v-for="item in config.activityYearOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value"/>
      </el-select>
      <el-select
        v-model="activityTerm"
        placeholder="学期"
        clearable
        size="medium"
        style="width: 110px"
        class="filter-item"
        @change="getlist">
        <el-option
          v-for="item in config.activityModuleOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        size="medium"
        icon="el-icon-refresh"
        @click="getlist">
        刷新
      </el-button>
      <el-button
        v-if="$store.getters.menuList.hd_activity_create"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        @click="handleCreateAction">
        创建活动
      </el-button>
      <el-button
        v-if="$store.getters.menuList.hd_export_excel"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        size="medium"
        icon="el-icon-download"
        @click="exportActivityExcel">
        导出Excel
      </el-button>
    </div>
    <el-table :data="activityList" size="medium" border fit stripe highlight-current-row>
      <el-table-column label="活动名称" style="min-width: 220px" min-width="120px">
        <template slot-scope="scope">
          <router-link :to="{ name: 'ActivityDetail', params: { id: scope.row.ac_id }}" class="link-type pointer" @click="handleDetail(scope.row)">{{ scope.row.ac_name }}</router-link>
          <el-tag v-if="scope.row.ac_type === 1" type="success" size="mini">快捷活动</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="150px">
        <template slot-scope="scope">
          <el-tag :type="scope.row | statusTagType" size="medium">{{ scope.row.ac_state | formateActivityState }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ac_classify" align="center" label="版块">
        <template slot-scope="scope">
          <span>{{ scope.row.ac_classify | formateClassify }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ac_year" align="center" label="学年"/>
      <el-table-column prop="ac_term" align="center" label="学期" width="100px"/>
      <el-table-column prop="ac_admname" align="center" label="创建人"/>
      <el-table-column prop="ac_locktime" align="center" label="截止报名时间"/>
    </el-table>
    <pagination :total="pageTotal" :page.sync="pageNum" :limit="10" layout="prev, pager, next, jumper" class="hidden-xs-only" @pagination="getlist"/>
    <pagination :total="pageTotal" :page.sync="pageNum" :limit="10" small layout="prev, pager, next" class="hidden-sm-and-up" @pagination="getlist"/>

    <field-dialog :visible="dialogFormVisible" :dialog-model="dialogModel" mode="create" @change-visible="handleDialogVisible"/>
  </div>
</template>

<script>

import Pagination from '@/components/Pagination'
import config from '@/utils/config.js'
import fieldDialog from './fieldDialog'
import { createActivity, getActivityPublishList, getActivityJoinList,
  getActivityAllList, getActivityVerifyList, getAdminVeifyList, getAdminEditList, getAdminFailList, getAdminAllList, getAllVerifyList, getAllFailList } from '@/api/activity'
// import func from './vue-temp/vue-editor-bridge'

const activityList = []

export default {
  components: { Pagination, fieldDialog },
  data() {
    return {
      containerLoading: false,
      userInfo: null,
      activityType: null,
      stateOptions: [],
      activityStatus: null,
      activityList,
      config,
      pageNum: 1,
      pageTotal: 0,
      dialogModel: {},
      dialogFormVisible: false,
      activityYear: null,
      activityTerm: null
    }
  },
  created() {
    this.userInfo = this.$store.getters.userInfo
    if (this.userInfo.role_id === 1) {
      this.stateOptions = config.stuAcStatusOptions
    } else if ([3, 2].indexOf(this.userInfo.role_id) > -1) {
      this.stateOptions = config.stuAcAdminOptions
    }
    this.activityStatus = this.stateOptions[0].value
    this.getlist()
  },
  mounted() {
    this.$on('updateList', () => {
      this.getlist()
      this.handleDialogVisible(false)
    })
  },
  methods: {
    handleCreateAction() {
      this.handleDialogVisible(true)
    },
    handleDialogVisible(value) {
      this.dialogFormVisible = value
    },
    getlist(params) {
      this.containerLoading = true

      let getTableData = getActivityAllList
      const page = params && params.page || this.pageNum
      const data = {
        page: page.toString(),
        size: '10'
      }

      // 增加筛选参数
      if (this.activityType) {
        data.Ac_classify = this.activityType
      }
      if (this.activityYear) {
        data.Ac_year = this.activityYear
      }
      if (this.activityTerm) {
        data.Ac_term = this.activityTerm.toString()
      }

      // 切换查询api
      if (this.activityStatus === 'publish') {
        getTableData = getActivityPublishList
      } else if (this.activityStatus === 'join') {
        getTableData = getActivityJoinList
      } else if (this.activityStatus === 'verify') {
        getTableData = getActivityVerifyList
      } else if (this.activityStatus === 'all') {
        getTableData = getActivityAllList
      } else if (this.activityStatus === 'adminVerify') {
        getTableData = getAdminVeifyList
      } else if (this.activityStatus === 'adminAllVerify') {
        getTableData = getAllVerifyList
      } else if (this.activityStatus === 'adminEdit') {
        getTableData = getAdminEditList
      } else if (this.activityStatus === 'adminFail') {
        getTableData = getAdminFailList
      } else if (this.activityStatus === 'adminAllFail') {
        getTableData = getAllFailList
      } else if (this.activityStatus === 'adminAll') {
        getTableData = getAdminAllList
      } else {
        return
      }

      getTableData(data)
        .then(res => {
          this.activityList = res.data.map(this.formateResData)
          this.pageTotal = res.total
        })
        .catch(() => {})
        .finally(() => {
          this.containerLoading = false
        })
    },
    formateResData(activity) {
      if (this.activityStatus === 'join') {
        activity.ac_state = '已参加'
      } else if (this.activityStatus === 'verify') {
        activity.ac_state = '待验证'
      }

      return activity
    },
    submitActivity() {
      createActivity(this.dialogModel).then(res => {
      })
    },
    exportActivityExcel() {
      const params = []
      // 增加筛选参数
      if (this.activityType) {
        params.push(`Ac_classify=${this.activityType}`)
      }
      if (this.activityYear) {
        params.push(`Ac_year=${this.activityYear}`)
      }
      if (this.activityTerm) {
        params.push(`Ac_term=${this.activityTerm}`)
      }

      const search = params.join('&')
      // 创建隐藏的可下载链接
      var eleLink = document.createElement('a')
      eleLink.target = '_blank'
      eleLink.href = `/api/activity/exportAllAc.zepc?${search}`
      // 触发点击
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
    }
  }
}
</script>

<style scoped>
  @media screen and (max-width: 370px) {
    .pagination-container.hidden-sm-and-up {
      padding: 0;
    }
  }
</style>
